<div class="container">
  <div class="row text-center">
    <div class="column column-33">
      <div class="button-group">
        <div
          class="button button-primary"
          mwlCalendarPreviousView
          [view]="view"
          [(viewDate)]="viewDate"
          (viewDateChange)="viewDateChange.next(viewDate)"
        >
          Previous
        </div>
        <div
          class="button button-outline-secondary"
          mwlCalendarToday
          [(viewDate)]="viewDate"
          (viewDateChange)="viewDateChange.next(viewDate)"
        >
          Today
        </div>
        <div
          class="button button-primary"
          mwlCalendarNextView
          [view]="view"
          [(viewDate)]="viewDate"
          (viewDateChange)="viewDateChange.next(viewDate)"
        >
          Next
        </div>
      </div>
    </div>
    <div class="column column-33">
      <h3>{{ viewDate | calendarDate: view + 'ViewTitle':locale }}</h3>
    </div>
    <div class="column column-33">
      <div class="button-group">
        <div
          class="button button-primary"
          (click)="changeView('month')"
          [class.active]="view === 'month'"
        >
          Month
        </div>
        <div
          class="button button-primary"
          (click)="changeView('week')"
          [class.active]="view === 'week'"
        >
          Week
        </div>
        <div
          class="button button-primary"
          (click)="changeView('day')"
          [class.active]="view === 'day'"
        >
          Day
        </div>
      </div>
    </div>
  </div>
</div>
